window.addEvent('domready',function () {
    $('introbox').setStyles({'opacity':0,'display':'block'});
    new Fx.Style($('introbox'),'opacity',{'duration':1500}).start(1);
});

function koi_start() {
    new Fx.Style($('introbox'),'opacity',{'duration':1000,'onComplete':function () {
        $('introbox').setStyle('display','none');
    }}).start(0);
    $('progressbox').setStyles({'opacity':0,'display':'block'});
    new Fx.Style($('progressbox'),'opacity',{'duration':1500,onComplete:function () {
        $('progresswidth').setStyle('background-color','#5476ff');
        
        // Call the callback function to start the installation
        koi_startcallback();
    }}).start(1);
}


// Called after every query
var lastfx = false;
var laststage = false;
function koi_change(stage,message,percent,duration) {
    // Progress bar
    var color = new Color('#6486ff').mix('#76ff54', percent);
    if (lastfx) lastfx.stop();
    lastfx = new Fx.Styles($('progresswidth'),{
        'duration':(duration+(duration/3)),
        'transition': Fx.Transitions.Sine.easeOut,
        'wait':false
    }).start({
        'background-color':color.rgbToHex(),
        'width':(percent*4)
    });
    
    
    // Stage tabs
    if (stage != laststage) {
        $(stage + 'tab').removeClass("queue").addClass("current");
        $(stage + 'tab').setStyle('border-color',color.rgbToHex());
        if (laststage) $(laststage + 'tab').removeClass("current").addClass("done");
        laststage = stage;
        
        // Progress bar message
        status(message);
    } else {
        if (!stage) {
            status(message);
        } else {
            // Progress bar message (without effect)
            status(message,true);
        }
    }
    
    if (percent==100) {
        // Wait until the progress bar has filled
        window.setTimeout("end()",duration+(duration/3));
    }
}

function end() {
    status("All done!");
    $(laststage + 'tab').removeClass("current").addClass("done");
    
    new Fx.Style($('progressbox'),'opacity',{'duration':1000,'onComplete':function () {
        $('progressbox').setStyle('display','none');
    }}).start(0);
    $('endbox').setStyles({'opacity':0,'display':'block'});
    new Fx.Style($('endbox'),'opacity',{'duration':1500}).start(1);
}


// Called if download fails
function koi_downloaderror() {
    new Fx.Style($('progressbox'),'opacity',{'duration':1000,'onComplete':function () {
        $('progressbox').setStyle('display','none');
    }}).start(0);
    $('downloaderror').setStyles({'opacity':0,'display':'block'});
    new Fx.Style($('downloaderror'),'opacity',{'duration':1500}).start(1);
}


// Called with short error message if there is an error
// koi_alert will also be called with more information about the error
function koi_error(msg) {
    if (lastfx) lastfx.stop();
    status(msg);
    new Fx.Styles($('progresswidth'),{
        'duration':600,
        'wait':false
    }).start({
        'width':400,
        'background-color':'#f67a7a'
    });
}


// Alert to be displayed to user called with HTML (so cannot use alert())
function koi_alert(msg) {
    $('alert').setStyles({'opacity':0,'display':'block'});
    $E('div','alertmsg').innerHTML = msg;
    new Fx.Style($('alert'),'opacity',{'duration':1000}).start(0,1);
}
function alert_close() {
    new Fx.Style($('alert'),'opacity',{'duration':500,onComplete:function () {
        $('alert').setStyle('display','none');
    }}).start(0);
    
    // Must call the callback function
    koi_alertcallback();
}


var statusmsg = false;
var statusfx = false;
function status(msg,noeffect) {
    if ( (noeffect) && ($('koi_num')) ) {
        new Fx.Style($('koi_num'),'opacity',{'onComplete':function () {
            $('progressstatus').innerHTML = msg;
            $('koi_num').setStyle('opacity',0);
            new Fx.Style($('koi_num'),'opacity').start(1);
        }}).start(0);
        return true;
    }
    
    if (!statusfx) statusfx = new Fx.Styles($('progressstatus'),{
        'duration':200,
        'wait':false,
        'onComplete':function () {
            if (!statusmsg) return;
            $('progressstatus').innerHTML = statusmsg;
            statusmsg = false;
            $('progressstatus').setStyles({'margin-top':'-10px'});
            statusfx.start({'margin-top':0,'opacity':1});
        }
    });
    
    statusmsg = msg;
    statusfx.start({'margin-top':10,'opacity':0});
}